// more.js
// 打开支付设置
function openPaymentSetting() {
  // 创建支付设置弹窗
  const paymentSettings = `
    <div id="payment-settings" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; justify-content: center; align-items: center;">
      <div style="background: white; border-radius: 12px; padding: 20px; width: 85%; max-width: 400px;">
        <h3 style="margin-bottom: 15px;">支付设置</h3>
        
        <div style="margin-bottom: 15px;">
          <label style="display: block; margin-bottom: 8px; font-weight: 500;">支付密码</label>
          <input type="password" placeholder="设置支付密码" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px;">
        </div>
        
        <div style="margin-bottom: 20px;">
          <label style="display: block; margin-bottom: 8px; font-weight: 500;">指纹支付</label>
          <div style="display: flex; justify-content: space-between;">
            <div>开启指纹支付</div>
            <div style="position: relative; width: 50px; height: 26px;">
              <input type="checkbox" id="fingerprint-toggle" style="opacity: 0; width: 0; height: 0;">
              <label for="fingerprint-toggle" style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px;">
                <span style="position: absolute; height: 22px; width: 22px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%;"></span>
              </label>
            </div>
          </div>
        </div>
        
        <div style="display: flex; justify-content: space-between;">
          <button onclick="document.getElementById('payment-settings').remove()" style="background: #f0f0f0; color: #333; padding: 10px 20px; border-radius: 20px; border: none;">取消</button>
          <button onclick="savePaymentSettings()" style="background: #1677ff; color: white; padding: 10px 20px; border-radius: 20px; border: none;">保存设置</button>
        </div>
      </div>
    </div>
  `;
  
  document.body.insertAdjacentHTML('beforeend', paymentSettings);
}

// 保存支付设置
function savePaymentSettings() {
  alert('支付设置已保存');
  document.getElementById('payment-settings').remove();
}

// 打开自动扣款
function openAutoPay() {
  // 创建自动扣款弹窗
  const autoPaySettings = `
    <div id="auto-pay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; justify-content: center; align-items: center;">
      <div style="background: white; border-radius: 12px; padding: 20px; width: 85%; max-width: 400px;">
        <h3 style="margin-bottom: 15px;">自动扣款管理</h3>
        
        <div style="margin-bottom: 15px; border: 1px solid #eee; border-radius: 8px; padding: 12px;">
          <div style="display: flex; justify-content: space-between; align-items: center;">
            <div>
              <div style="font-weight: 500;">视频会员续费</div>
              <div style="font-size: 12px; color: #666;">每月15日自动扣款 ¥19.00</div>
            </div>
            <button onclick="removeAutoPay('video')" style="background: #ff4d4f; color: white; padding: 5px 10px; border-radius: 15px; border: none; font-size: 12px;">关闭</button>
          </div>
        </div>
        
        <div style="margin-bottom: 15px; border: 1px solid #eee; border-radius: 8px; padding: 12px;">
          <div style="display: flex; justify-content: space-between; align-items: center;">
            <div>
              <div style="font-weight: 500;">音乐会员续费</div>
              <div style="font-size: 12px; color: #666;">每月10日自动扣款 ¥12.00</div>
            </div>
            <button onclick="removeAutoPay('music')" style="background: #ff4d4f; color: white; padding: 5px 10px; border-radius: 15px; border: none; font-size: 12px;">关闭</button>
          </div>
        </div>
        
        <div style="text-align: center; margin-top: 20px;">
          <button onclick="document.getElementById('auto-pay').remove()" style="background: #f0f0f0; color: #333; padding: 10px 20px; border-radius: 20px; border: none; width: 100%;">关闭</button>
        </div>
      </div>
    </div>
  `;
  
  document.body.insertAdjacentHTML('beforeend', autoPaySettings);
}

// 移除自动扣款
function removeAutoPay(type) {
  if (confirm('确定要关闭此自动扣款服务吗？')) {
    alert(`${type === 'video' ? '视频会员' : '音乐会员'}自动扣款已关闭`);
    document.getElementById('auto-pay').remove();
  }
}

// 打开支付记录
function openPaymentRecord() {
  // 创建支付记录弹窗
  const paymentRecords = `
    <div id="payment-records" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; justify-content: center; align-items: center;">
      <div style="background: white; border-radius: 12px; padding: 20px; width: 85%; max-width: 400px; max-height: 80vh; overflow-y: auto;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
          <h3>支付记录</h3>
          <button onclick="document.getElementById('payment-records').remove()" style="background: none; border: none; font-size: 24px; cursor: pointer;">&times;</button>
        </div>
        
        <div style="margin-bottom: 20px;">
          <div style="display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee;">
            <div>
              <div style="font-weight: 500;">超市购物</div>
              <div style="font-size: 12px; color: #666;">2025-06-12 18:30</div>
            </div>
            <div style="color: #ff4d4f; font-weight: 500;">-¥128.50</div>
          </div>
          
          <div style="display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee;">
            <div>
              <div style="font-weight: 500;">餐厅消费</div>
              <div style="font-size: 12px; color: #666;">2025-06-12 12:15</div>
            </div>
            <div style="color: #ff4d4f; font-weight: 500;">-¥86.00</div>
          </div>
          
          <div style="display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee;">
            <div>
              <div style="font-weight: 500;">收到转账</div>
              <div style="font-size: 12px; color: #666;">2025-06-11 09:45</div>
            </div>
            <div style="color: #34a853; font-weight: 500;">+¥500.00</div>
          </div>
          
          <div style="display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee;">
            <div>
              <div style="font-weight: 500;">话费充值</div>
              <div style="font-size: 12px; color: #666;">2025-06-10 08:20</div>
            </div>
            <div style="color: #ff4d4f; font-weight: 500;">-¥100.00</div>
          </div>
          
          <div style="display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee;">
            <div>
              <div style="font-weight: 500;">视频会员续费</div>
              <div style="font-size: 12px; color: #666;">2025-06-09 10:30</div>
            </div>
            <div style="color: #ff4d4f; font-weight: 500;">-¥19.00</div>
          </div>
        </div>
        
        <div style="text-align: center; margin-top: 10px;">
          <button onclick="document.getElementById('payment-records').remove()" style="background: #1677ff; color: white; padding: 10px 20px; border-radius: 20px; border: none; width: 100%;">关闭</button>
        </div>
      </div>
    </div>
  `;
  
  document.body.insertAdjacentHTML('beforeend', paymentRecords);
}

// 安全设置功能
function openSecurity() {
  const securityDialog = `
    <div id="security-dialog" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; justify-content: center; align-items: center;">
      <div style="background: white; border-radius: 12px; padding: 20px; width: 85%; max-width: 400px;">
        <h3 style="margin-bottom: 15px;">安全设置</h3>
        
        <div style="margin-bottom: 15px;">
          <label style="display: block; margin-bottom: 8px; font-weight: 500;">登录密码</label>
          <input type="password" placeholder="设置新登录密码" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px;">
        </div>
        
        <div style="margin-bottom: 20px;">
          <label style="display: block; margin-bottom: 8px; font-weight: 500;">安全验证方式</label>
          <div style="display: flex; flex-direction: column; gap: 10px;">
            <div style="display: flex; justify-content: space-between; align-items: center;">
              <div>短信验证</div>
              <div style="position: relative; width: 50px; height: 26px;">
                <input type="checkbox" id="sms-toggle" checked style="opacity: 0; width: 0; height: 0;">
                <label for="sms-toggle" style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #1677ff; transition: .4s; border-radius: 34px;">
                  <span style="position: absolute; height: 22px; width: 22px; left: 26px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%;"></span>
                </label>
              </div>
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center;">
              <div>邮箱验证</div>
              <div style="position: relative; width: 50px; height: 26px;">
                <input type="checkbox" id="email-toggle" style="opacity: 0; width: 0; height: 0;">
                <label for="email-toggle" style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px;">
                  <span style="position: absolute; height: 22px; width: 22px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%;"></span>
                </label>
              </div>
            </div>
          </div>
        </div>
        
        <div style="display: flex; justify-content: space-between;">
          <button onclick="document.getElementById('security-dialog').remove()" style="background: #f0f0f0; color: #333; padding: 10px 20px; border-radius: 20px; border: none;">取消</button>
          <button onclick="saveSecuritySettings()" style="background: #1677ff; color: white; padding: 10px 20px; border-radius: 20px; border: none;">保存设置</button>
        </div>
      </div>
    </div>
  `;
  
  document.body.insertAdjacentHTML('beforeend', securityDialog);
}

function saveSecuritySettings() {
  alert('安全设置已更新');
  document.getElementById('security-dialog').remove();
}

// 账号保护功能
function openAccountProtect() {
  const accountProtectDialog = `
    <div id="account-protect-dialog" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; justify-content: center; align-items: center;">
      <div style="background: white; border-radius: 12px; padding: 20px; width: 85%; max-width: 400px;">
        <h3 style="margin-bottom: 15px;">账号保护</h3>
        
        <div style="margin-bottom: 20px;">
          <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #eee;">
            <div>
              <div style="font-weight: 500;">登录保护</div>
              <div style="font-size: 13px; color: #666;">开启后每次登录需验证身份</div>
            </div>
            <div style="position: relative; width: 50px; height: 26px;">
              <input type="checkbox" id="login-protect-toggle" checked style="opacity: 0; width: 0; height: 0;">
              <label for="login-protect-toggle" style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #1677ff; transition: .4s; border-radius: 34px;">
                <span style="position: absolute; height: 22px; width: 22px; left: 26px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%;"></span>
              </label>
            </div>
          </div>
          
          <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #eee;">
            <div>
              <div style="font-weight: 500;">设备管理</div>
              <div style="font-size: 13px; color: #666;">查看已登录设备</div>
            </div>
            <button onclick="viewDevices()" style="background: none; border: none; color: #1677ff; cursor: pointer;">管理</button>
          </div>
          
          <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0;">
            <div>
              <div style="font-weight: 500;">异地登录提醒</div>
              <div style="font-size: 13px; color: #666;">开启后异地登录将通知您</div>
            </div>
            <div style="position: relative; width: 50px; height: 26px;">
              <input type="checkbox" id="location-alert-toggle" checked style="opacity: 0; width: 0; height: 0;">
              <label for="location-alert-toggle" style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #1677ff; transition: .4s; border-radius: 34px;">
                <span style="position: absolute; height: 22px; width: 22px; left: 26px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%;"></span>
              </label>
            </div>
          </div>
        </div>
        
        <div style="text-align: center; margin-top: 10px;">
          <button onclick="document.getElementById('account-protect-dialog').remove()" style="background: #1677ff; color: white; padding: 10px 20px; border-radius: 20px; border: none; width: 100%;">关闭</button>
        </div>
      </div>
    </div>
  `;
  
  document.body.insertAdjacentHTML('beforeend', accountProtectDialog);
}

function viewDevices() {
  alert('正在打开设备管理页面...');
  // 在实际应用中，这里会跳转到设备管理页面
}

// 应急处理功能
function openEmergency() {
  const emergencyDialog = `
    <div id="emergency-dialog" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; justify-content: center; align-items: center;">
      <div style="background: white; border-radius: 12px; padding: 20px; width: 85%; max-width: 400px;">
        <h3 style="margin-bottom: 15px; color: #ff4d4f;">应急处理</h3>
        
        <div style="margin-bottom: 20px;">
          <div style="display: flex; align-items: center; padding: 15px; background: #fff8f8; border-radius: 8px; margin-bottom: 10px; cursor: pointer;" onclick="freezeAccount()">
            <div style="width: 40px; height: 40px; background: #ff4d4f; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
              <span style="color: white; font-size: 20px;">🔒</span>
            </div>
            <div>
              <h4 style="margin-bottom: 5px;">冻结账号</h4>
              <p style="font-size: 13px; color: #666;">立即冻结账号防止资金损失</p>
            </div>
          </div>
          
          <div style="display: flex; align-items: center; padding: 15px; background: #f8fbff; border-radius: 8px; margin-bottom: 10px; cursor: pointer;" onclick="resetPassword()">
            <div style="width: 40px; height: 40px; background: #1677ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
              <span style="color: white; font-size: 20px;">🔑</span>
            </div>
            <div>
              <h4 style="margin-bottom: 5px;">修改密码</h4>
              <p style="font-size: 13px; color: #666;">立即重置登录密码</p>
            </div>
          </div>
          
          <div style="display: flex; align-items: center; padding: 15px; background: #f8f8f8; border-radius: 8px; cursor: pointer;" onclick="contactCustomerService()">
            <div style="width: 40px; height: 40px; background: #34a853; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
              <span style="color: white; font-size: 20px;">📞</span>
            </div>
            <div>
              <h4 style="margin-bottom: 5px;">联系客服</h4>
              <p style="font-size: 13px; color: #666;">24小时紧急客服热线</p>
            </div>
          </div>
        </div>
        
        <div style="text-align: center;">
          <button onclick="document.getElementById('emergency-dialog').remove()" style="background: #f0f0f0; color: #333; padding: 10px 20px; border-radius: 20px; border: none; width: 100%;">取消</button>
        </div>
      </div>
    </div>
  `;
  
  document.body.insertAdjacentHTML('beforeend', emergencyDialog);
}

function freezeAccount() {
  if (confirm('确定要冻结账号吗？冻结后需要身份验证才能解冻')) {
    alert('账号已冻结！请尽快联系客服处理异常情况');
    document.getElementById('emergency-dialog').remove();
  }
}

function resetPassword() {
  alert('正在打开密码重置页面...');
  // 在实际应用中，这里会跳转到密码重置页面
}

function contactCustomerService() {
  alert('正在拨打客服热线: 400-123-4567');
}

// 打开反馈建议
function openFeedback() {
  alert('正在打开反馈建议');
}

// 打开关于我们
function openAbout() {
  alert('正在打开关于我们');
}

// 打开帮助中心
function openHelp() {
  alert('正在打开帮助中心');
}
// more.js
// ... 原有代码保持不变 ...

// 打开反馈建议
function openFeedback() {
  const feedbackDialog = `
    <div id="feedback-dialog" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; justify-content: center; align-items: center;">
      <div style="background: white; border-radius: 12px; padding: 20px; width: 85%; max-width: 400px;">
        <h3 style="margin-bottom: 15px;">反馈建议</h3>
        
        <div style="margin-bottom: 15px;">
          <label style="display: block; margin-bottom: 8px; font-weight: 500;">反馈类型</label>
          <select id="feedback-type" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px;">
            <option value="suggestion">功能建议</option>
            <option value="problem">使用问题</option>
            <option value="complaint">投诉举报</option>
            <option value="other">其他反馈</option>
          </select>
        </div>
        
        <div style="margin-bottom: 15px;">
          <label style="display: block; margin-bottom: 8px; font-weight: 500;">反馈内容</label>
          <textarea id="feedback-content" placeholder="请详细描述您的反馈或建议" style="width: 100%; height: 120px; padding: 10px; border: 1px solid #ddd; border-radius: 6px; resize: vertical;"></textarea>
        </div>
        
        <div style="margin-bottom: 15px;">
          <label style="display: block; margin-bottom: 8px; font-weight: 500;">联系方式 (可选)</label>
          <input type="text" id="feedback-contact" placeholder="手机/邮箱" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px;">
        </div>
        
        <div style="display: flex; justify-content: space-between;">
          <button onclick="document.getElementById('feedback-dialog').remove()" style="background: #f0f0f0; color: #333; padding: 10px 20px; border-radius: 20px; border: none;">取消</button>
          <button onclick="submitFeedback()" style="background: #1677ff; color: white; padding: 10px 20px; border-radius: 20px; border: none;">提交反馈</button>
        </div>
      </div>
    </div>
  `;
  
  document.body.insertAdjacentHTML('beforeend', feedbackDialog);
}

function submitFeedback() {
  const type = document.getElementById('feedback-type').value;
  const content = document.getElementById('feedback-content').value;
  const contact = document.getElementById('feedback-contact').value;
  
  if (!content) {
    alert('请填写反馈内容');
    return;
  }
  
  // 实际应用中这里会发送到服务器
  alert('反馈提交成功！感谢您的宝贵意见');
  document.getElementById('feedback-dialog').remove();
}

// 打开关于我们
function openAbout() {
  const aboutDialog = `
    <div id="about-dialog" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; justify-content: center; align-items: center;">
      <div style="background: white; border-radius: 12px; padding: 20px; width: 85%; max-width: 400px;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
          <h3>关于我们</h3>
          <button onclick="document.getElementById('about-dialog').remove()" style="background: none; border: none; font-size: 24px; color:black;cursor: pointer;">&times;</button>
        </div>
        
        <div style="text-align: center; margin-bottom: 20px;">
          <img src="/static/img/logo.png" alt="支付平台" style="width: 80px; height: 80px; margin: 0 auto 15px;">
          <h4 style="margin-bottom: 10px;">移动支付平台</h4>
          <p style="color: #666; margin-bottom: 15px;">版本号: 5.2.1</p>
        </div>
        
        <div style="margin-bottom: 20px;">
          <p style="line-height: 1.6; margin-bottom: 15px;">
            移动支付平台是国内领先的移动支付解决方案提供商，致力于为用户提供安全、便捷的支付体验。
          </p>
          <p style="line-height: 1.6; margin-bottom: 15px;">
            我们拥有超过2亿用户，支持超过1000万家商户，覆盖全国300多个城市。
          </p>
        </div>
        
        <div style="display: flex; justify-content: space-between; margin-top: 15px;">
          <button onclick="openPrivacyPolicy()" style="background: none; border: none; color: #1677ff; cursor: pointer; padding: 8px 12px;">隐私政策</button>
          <button onclick="openUserAgreement()" style="background: none; border: none; color: #1677ff; cursor: pointer; padding: 8px 12px;">用户协议</button>
        </div>
        
        <div style="text-align: center; margin-top: 20px; color: #666; font-size: 12px;">
          © 2025 移动支付平台 版权所有
        </div>
      </div>
    </div>
  `;
  
  document.body.insertAdjacentHTML('beforeend', aboutDialog);
}

function openPrivacyPolicy() {
  alert('正在打开隐私政策页面...');
  // 实际应用中会打开新页面
}

function openUserAgreement() {
  alert('正在打开用户协议页面...');
  // 实际应用中会打开新页面
}

// 打开帮助中心
function openHelp() {
  const helpDialog = `
    <div id="help-dialog" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; justify-content: center; align-items: center;">
      <div style="background: white; border-radius: 12px; padding: 20px; width: 85%; max-width: 400px; max-height: 80vh; overflow-y: auto;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
          <h3>帮助中心</h3>
          <button onclick="document.getElementById('help-dialog').remove()" style="background: none; border: none; font-size: 24px; cursor: pointer;">&times;</button>
        </div>
        
        <div style="margin-bottom: 20px;">
          <h4 style="margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #eee;">常见问题</h4>
          
          <div style="margin-bottom: 15px;">
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px 0; cursor: pointer;" onclick="toggleAnswer('answer1')">
              <div style="font-weight: 500;">如何添加银行卡？</div>
              <div style="font-size: 18px;">+</div>
            </div>
            <div id="answer1" style="display: none; padding: 10px; background: #f9f9f9; border-radius: 6px; margin-top: 5px;">
              在"我的"页面选择"银行卡"，然后点击"添加银行卡"按钮，按照提示输入银行卡信息并验证即可。
            </div>
          </div>
          
          <div style="margin-bottom: 15px;">
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px 0; cursor: pointer;" onclick="toggleAnswer('answer2')">
              <div style="font-weight: 500;">支付密码忘记了怎么办？</div>
              <div style="font-size: 18px;">+</div>
            </div>
            <div id="answer2" style="display: none; padding: 10px; background: #f9f9f9; border-radius: 6px; margin-top: 5px;">
              您可以在登录页面点击"忘记密码"，通过手机验证或身份验证重置支付密码。
            </div>
          </div>
          
          <div style="margin-bottom: 15px;">
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px 0; cursor: pointer;" onclick="toggleAnswer('answer3')">
              <div style="font-weight: 500;">如何查看交易记录？</div>
              <div style="font-size: 18px;">+</div>
            </div>
            <div id="answer3" style="display: none; padding: 10px; background: #f9f9f9; border-radius: 6px; margin-top: 5px;">
              在"账单"页面可以查看所有交易记录，也可以使用筛选功能按时间或类型查看。
            </div>
          </div>
          
          <div style="margin-bottom: 15px;">
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px 0; cursor: pointer;" onclick="toggleAnswer('answer4')">
              <div style="font-weight: 500;">账户被冻结了怎么办？</div>
              <div style="font-size: 18px;">+</div>
            </div>
            <div id="answer4" style="display: none; padding: 10px; background: #f9f9f9; border-radius: 6px; margin-top: 5px;">
              请拨打客服热线 400-123-4567 或使用"应急处理"功能联系客服处理。
            </div>
          </div>
        </div>
        
        <div style="margin-bottom: 20px;">
          <h4 style="margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #eee;">联系客服</h4>
          
          <div style="display: flex; align-items: center; padding: 12px; background: #f8f8f8; border-radius: 8px; margin-bottom: 10px; cursor: pointer;" onclick="contactCustomerService()">
            <div style="width: 40px; height: 40px; background: #34a853; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
              <span style="color: white; font-size: 20px;">📞</span>
            </div>
            <div>
              <h4 style="margin-bottom: 5px;">电话客服</h4>
              <p style="font-size: 13px; color: #666;">400-123-4567 (24小时)</p>
            </div>
          </div>
          
          <div style="display: flex; align-items: center; padding: 12px; background: #f8f8f8; border-radius: 8px; cursor: pointer;" onclick="openOnlineService()">
            <div style="width: 40px; height: 40px; background: #1677ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
              <span style="color: white; font-size: 20px;">💬</span>
            </div>
            <div>
              <h4 style="margin-bottom: 5px;">在线客服</h4>
              <p style="font-size: 13px; color: #666;">09:00-22:00</p>
            </div>
          </div>
        </div>
        
        <div style="text-align: center; margin-top: 10px;">
          <button onclick="document.getElementById('help-dialog').remove()" style="background: #1677ff; color: white; padding: 10px 20px; border-radius: 20px; border: none; width: 100%;">关闭</button>
        </div>
      </div>
    </div>
  `;
  
  document.body.insertAdjacentHTML('beforeend', helpDialog);
}

function toggleAnswer(id) {
  const element = document.getElementById(id);
  if (element.style.display === 'block') {
    element.style.display = 'none';
    event.currentTarget.querySelector('div:last-child').textContent = '+';
  } else {
    element.style.display = 'block';
    event.currentTarget.querySelector('div:last-child').textContent = '-';
  }
}

function openOnlineService() {
  alert('正在打开在线客服...');
}

// ... 原有其他函数保持不变 ...